<template>
	<!-- 产品直通率报表 -->
	<div>
		<v-container row class="text-subtitle-1 d-flex justify-center  align-left">

			<v-row class="mt-2">
				<v-col cols="12" sm="3" md="2">
					<v-text-field label="项目号" v-model="processQuery.projectcode" dense outlined>
					</v-text-field>
				</v-col>
				<!-- sm="6" md="2" -->
				<v-col cols="12" sm="3" md="2">
					<v-text-field label="设备名称" v-model="processQuery.partname" dense outlined>
					</v-text-field>
				</v-col>
				<v-col cols="12" sm="2" md="4">
					<v-row>
						<v-col cols="12" sm="3" md="6">
							<v-menu v-model="startMenu" :close-on-content-click="false" :nudge-right="40"
								transition="scale-transition" offset-y min-width="auto">
								<template v-slot:activator="{ on, attrs }">
									<v-text-field required v-model="processQuery.startTime" label="开始日期" readonly
										v-bind="attrs" v-on="on" dense outlined>
									</v-text-field>
								</template>
								<v-date-picker locale="zh-cn" v-model="processQuery.startTime" type="month" no-title
									scrollable @input="startMenu = false">
								</v-date-picker>
							</v-menu>
						</v-col>

						<v-col cols="12" sm="3" md="6">
							<v-menu v-model="endMenu" :close-on-content-click="false" :nudge-right="40"
								transition="scale-transition" offset-y min-width="auto">
								<template v-slot:activator="{ on, attrs }">
									<v-text-field required v-model="processQuery.endTime" label="结束日期" readonly
										v-bind="attrs" v-on="on" dense outlined>
									</v-text-field>
								</template>
								<v-date-picker locale="zh-cn" type="month" no-title scrollable
									v-model="processQuery.endTime" @input="endMenu = false">
								</v-date-picker>
							</v-menu>
						</v-col>


					</v-row>
				</v-col>

				<v-col cols="12" sm="2" md="2">
					<v-checkbox v-model="processQuery.checkresult" dense label="是否异常"></v-checkbox>
				</v-col>
				<v-col cols="12" sm="2" md="2">
					<v-btn depressed color="primary" @click="processQueryLoad">查询</v-btn>
					<v-btn class="ml-3" depressed color="primary" @click="refreshprocessQueryLoad">
						刷新</v-btn>
				</v-col>
			</v-row>
		</v-container>
		<br />
		<v-tabs color="red">
			<v-tab>
				详细列表
			</v-tab>
			<v-tab @click="loadEchartsData">
				曲线图
			</v-tab>
			<v-tab-item>
				<v-alert text color="blue-grey" class="text-center">
					如下统计的产品直通率：<a>{{this.checkPassRate}}</a>%
				</v-alert>
				<!-- :single-select="true" -->
				<v-data-table :headers="processHeaderList" :items="processDataList" small fixed-header item-key="id"
					dense class="text-no-wrap" loading-text="正在加载请稍等......" :options.sync="processOptions" show-select
					:footer-props="vuetifyDefaultPage" :loading="processLoading"
					:server-items-length="processTotalCount">
					<template v-slot:item.checkresult="{ item }">
						<a :style="item.checkresult?'color:red;':'color:green;'">{{item.checkresult?"是":"否"}}</a>
					</template>
				</v-data-table>

			</v-tab-item>


			<v-tab-item>
				<v-card>
					<v-card-text>
						<chart id="production_qapass" :option="option" />
					</v-card-text>
				</v-card>
			</v-tab-item>

		</v-tabs>

	</div>
</template>
<script>
	import Chart from '../../comments/Chart.vue'
	export default {
		name: 'mes_production_qapass',
		components: {
			chart: Chart
		},
		data() {
			return {
				option: {
					title: {
						text: "产品直通率曲线图"
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['通过率百分比']
					},
					xAxis: {
						name: '月份',
						data: []
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						name: "通过率",
						type: "line",
						data: []
					}]
				},
				userCommentModel: {
					loadSelectUserItemsUrl: ``,
					isReturnObj: true,
					label: '选择加工人员(必填)',
					paramterUserList: []
				},
				startMenu: false,
				endMenu: false,
				processModel: {},
				processCheckDialog: false,
				processQuery: {
					'projectcode': '',
					'partname': '',
					'checkresult': '',
					'startTime': null,
					'endTime': null
				},
				processHeaderList: [{
						text: '项目号',
						value: 'projectcode',
						filterable: true
					},
					{
						text: '设备名称',
						value: 'name',
						filterable: true
					},
					{
						text: '工单号',
						value: 'childrenorder.code',
						filterable: true
					},
					{
						text: '图号',
						value: 'piccode',
						filterable: true
					},
					{
						text: '加工人员',
						value: 'username',
						filterable: true
					},
					{
						text: '总件数',
						value: 'totalcount',
						filterable: true
					},
					{
						text: '完成件数',
						value: 'completecount',
						filterable: true
					},

					{
						text: '检验日期',
						value: 'checktime',
						filterable: true
					},
					{
						text: '是否异常',
						value: 'checkresult',
						filterable: true
					},
					{
						text: '检验结果描述',
						value: 'description',
						filterable: true
					},
					{
						text: '改进方法',
						value: 'improvedmethod',
						filterable: true
					}
				],
				childrenItems: [],
				processDataList: [],
				processOptions: { //页数
					page: 1,
					//每页行数
					itemsPerPage: 500
				},
				processLoading: true,
				processTotalCount: 0,
				vuetifyDefaultPage: {
					'items-per-page-text': '每页个数',
					'items-per-page-options': [500, 1000]
					// 'items-per-page-all-text': '100'
				},
				checkPassRate: 0,
			}
		},
		created() {

		},
		watch: {
			processOptions: {
				handler() {
					this.processQueryLoad()
				},
				deep: true
			},

		},

		methods: {
			async processQueryLoad() {
				this.processLoading = true
				this.processQuery.pageNumber = this.processOptions.page
				this.processQuery.pageSize = this.processOptions.itemsPerPage
				var response = await this.$httpRequest({
					url: `MES/MESProductQAPassReport/QueryPage`,
					method: 'post',
					data: this.processQuery
				})
				if (response.status == 1) {
					this.processDataList = response.data.data.result
					this.processTotalCount = response.data.data.pagination.totalRecords
					this.checkPassRate = response.data.checkPassRate
					this.processLoading = false
				} else {
					this.$message.error(response.info)
				}
			},
			//获取Echart显示的数据
			async loadEchartsData() {
				var response = await this.$httpRequest({
					url: `MES/MESProductQAPassReport/StatisticalMonthPassRate`,
					method: 'post',
					data: this.processQuery
				})
				if (response.status == 1) {
					this.option.xAxis.data=[]
					this.option.series[0].data=[]
					this.option.xAxis.data.push(...response.data.xData);
					this.option.series[0].data.push(...response.data.yData);
				}

			},
			refreshprocessQueryLoad() {
				this.processQuery = {}
				this.processQueryLoad()
			},

		},
	}
</script>

<style>
</style>
